<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车 - 面包工坊</title>
    <link rel="stylesheet" href="../assets/css/style.css">
    <link rel="stylesheet" href="../assets/css/cart.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <div id="app">
        <!-- 头部导航 -->
        <header class="header">
            <div class="container">
                <div class="logo">
                    <a href="../index.html">
                        <h1>面包工坊</h1>
                    </a>
                </div>
                <nav class="nav">
                    <ul>
                        <li><a href="../index.html">首页</a></li>
                        <li><a href="products.html">全部商品</a></li>
                        <li><a href="cart.html" class="active">
                            <i class="fas fa-shopping-cart"></i> 
                            购物车
                            <span class="cart-count" v-if="cartItems.length">{{cartItems.length}}</span>
                        </a></li>
                        <li class="user-menu">
                            <a href="#" id="userBtn">
                                <i class="fas fa-user"></i> 
                                <span class="user-text">{{isLoggedIn ? currentUser : '登录/注册'}}</span>
                            </a>
                            <!-- 用户菜单下拉部分 -->
                        </li>
                    </ul>
                </nav>
            </div>
        </header>

        <main class="cart-page">
            <div class="container">
                <!-- 面包屑导航 -->
                <div class="breadcrumb">
                    <a href="../index.html">首页</a>
                    <i class="fas fa-angle-right"></i>
                    <span>购物车</span>
                </div>

                <!-- 购物车内容 -->
                <div class="cart-content" v-if="cartItems.length">
                    <!-- 购物车头部 -->
                    <div class="cart-header">
                        <label class="checkbox-wrapper">
                            <input type="checkbox" 
                                   v-model="selectAll"
                                   @change="toggleSelectAll">
                            <span class="checkbox-label">全选</span>
                        </label>
                        <span class="column-product">商品信息</span>
                        <span class="column-price">单价</span>
                        <span class="column-quantity">数量</span>
                        <span class="column-total">小计</span>
                        <span class="column-action">操作</span>
                    </div>

                    <!-- 购物车列表 -->
                    <div class="cart-list">
                        <div v-for="item in cartItems" 
                             :key="item.id" 
                             class="cart-item">
                            <label class="checkbox-wrapper">
                                <input type="checkbox" 
                                       v-model="item.selected"
                                       @change="updateSelection">
                            </label>
                            <div class="product-info">
                                <div class="product-img">
                                    <img :src="item.image" :alt="item.name">
                                </div>
                                <div class="product-detail">
                                    <h3>{{item.name}}</h3>
                                    <p class="product-spec" v-if="item.spec">{{item.spec}}</p>
                                </div>
                            </div>
                            <div class="price">¥{{item.price}}</div>
                            <div class="quantity">
                                <button @click="decreaseQuantity(item)" 
                                        :disabled="item.quantity <= 1">-</button>
                                <input type="number" 
                                       v-model.number="item.quantity"
                                       @change="updateQuantity(item)">
                                <button @click="increaseQuantity(item)">+</button>
                            </div>
                            <div class="total">¥{{(item.price * item.quantity).toFixed(2)}}</div>
                            <div class="action">
                                <button class="btn-remove" @click="removeItem(item)">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 购物车底部 -->
                    <div class="cart-footer">
                        <div class="cart-summary">
                            <div class="selected-count">
                                已选择 <span>{{selectedCount}}</span> 件商品
                            </div>
                            <div class="total-price">
                                合计：<span>¥{{totalPrice.toFixed(2)}}</span>
                            </div>
                        </div>
                        <button class="btn-checkout" 
                                :disabled="!selectedCount"
                                @click="checkout">
                            结算({{selectedCount}})
                        </button>
                    </div>
                </div>

                <!-- 空购物车 -->
                <div class="empty-cart" v-else>
                    <i class="fas fa-shopping-cart"></i>
                    <p>购物车还是空的</p>
                    <a href="products.html" class="btn-primary">去逛逛</a>
                </div>
            </div>
        </main>
    </div>

    <script src="../assets/js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                cartItems: [],
                isLoggedIn: false,
                currentUser: null
            },
            computed: {
                selectAll: {
                    get() {
                        return this.cartItems.length && 
                               this.cartItems.every(item => item.selected);
                    },
                    set(value) {
                        this.cartItems.forEach(item => item.selected = value);
                    }
                },
                selectedCount() {
                    return this.cartItems.filter(item => item.selected).length;
                },
                totalPrice() {
                    return this.cartItems.reduce((sum, item) => {
                        return item.selected ? sum + (item.price * item.quantity) : sum;
                    }, 0);
                }
            },
            methods: {
                toggleSelectAll() {
                    const value = this.selectAll;
                    this.cartItems.forEach(item => item.selected = value);
                    this.saveCart();
                },
                updateSelection() {
                    this.saveCart();
                },
                increaseQuantity(item) {
                    item.quantity++;
                    this.saveCart();
                },
                decreaseQuantity(item) {
                    if (item.quantity > 1) {
                        item.quantity--;
                        this.saveCart();
                    }
                },
                updateQuantity(item) {
                    if (item.quantity < 1) item.quantity = 1;
                    this.saveCart();
                },
                removeItem(item) {
                    const index = this.cartItems.indexOf(item);
                    if (index > -1) {
                        this.cartItems.splice(index, 1);
                        this.saveCart();
                    }
                },
                saveCart() {
                    localStorage.setItem('cart', JSON.stringify(this.cartItems));
                },
                checkout() {
                    if (!this.isLoggedIn) {
                        alert('请先登录');
                        return;
                    }
                    // 这里添加结算逻辑
                    console.log('结算', this.cartItems.filter(item => item.selected));
                }
            },
            mounted() {
                // 模拟购物车数据
                this.cartItems = [
                    {
                        id: 1,
                        name: '法式长棍面包',
                        price: 12.9,
                        quantity: 2,
                        selected: true,
                        image: '../assets/img/product/product1.png',
                        spec: '500g/个'
                    },
                    {
                        id: 2,
                        name: '全麦面包',
                        price: 15.8,
                        quantity: 1,
                        selected: true,
                        image: '../assets/img/product/product1.png',
                        spec: '300g/个'
                    },
                    {
                        id: 3,
                        name: '牛角可颂',
                        price: 8.5,
                        quantity: 3,
                        selected: true,
                        image: '../assets/img/product/product1.png',
                        spec: '80g/个'
                    },
                    {
                        id: 4,
                        name: '吐司面包',
                        price: 10.0,
                        quantity: 1,
                        selected: true,
                        image: '../assets/img/product/product1.png',
                        spec: '400g/包'
                    },
                    {
                        id: 5,
                        name: '蓝莓贝果',
                        price: 9.9,
                        quantity: 2,
                        selected: true,
                        image: '../assets/img/product/product1.png',
                        spec: '100g/个'
                    }
                ];
                // 保存到本地存储
                this.saveCart();

                // 检查登录状态
                const savedUser = localStorage.getItem('currentUser');
                if (savedUser) {
                    this.isLoggedIn = true;
                    this.currentUser = savedUser;
                }
            }
        });
    </script>
</body>
</html> 